<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="yearClazzDataList">
      <el-table-column label="年级ID" align="center" prop="gradeId" />
      <el-table-column label="班级ID" align="center" prop="clazzId" />
      <el-table-column label="年度" align="center" prop="year" />
      <el-table-column label="年级" align="center" prop="gradeName" />
      <el-table-column label="班级" align="center" prop="clazzName" />
      <el-table-column label="班级人数" align="center" prop="studentCount" />
      <el-table-column label="操作" align="center" width="206" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button
              link
              type="primary"
              icon="Edit"
              @click="handleUpdate(scope.row)"
              v-hasPermission="['school:clazz_up:edit']"
          >升班</el-button
          >
          <el-button
              link
              type="primary"
              icon="Delete"
              @click="handleDelete(scope.row)"
              v-hasPermission="['school:clazz_up:remove']"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="clazzUpRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="当前年度" prop="currentYear">
          <el-input v-model="form.currentYear" placeholder="请输入当前年度" readonly />
        </el-form-item>
        <el-form-item label="当前年级" prop="currentGradeId">
          <el-input v-model="form.currentGradeName" placeholder="请输入当前年级" readonly />
        </el-form-item>
        <el-form-item label="当前班级" prop="currentClazzId">
          <el-input v-model="form.currentClazzName" placeholder="请输入当前班级" readonly />
        </el-form-item>
        <el-form-item label="目标年度" prop="upYear">
          <el-date-picker
              v-model="form.upYear"
              type="year"
              value-format="YYYY"
              placeholder="请选择"
          />
        </el-form-item>
        <el-form-item label="目标年级" prop="upGradeId">
          <el-select v-model="form.upGradeId" @change="gradeChangeHandle" placeholder="请选择">
            <el-option
                v-for="item in gradeOptions"
                :key="item.gradeId"
                :label="item.gradeName"
                :value="item.gradeId"
                :disabled="item.status == 0"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标班级" prop="upClazzId">
          <el-select v-model="form.upClazzId"  placeholder="请选择">
            <el-option
                v-for="item in clazzOptions"
                :key="item.clazzId"
                :label="item.clazzName"
                :value="item.clazzId"
                :disabled="item.status == 0"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup name="ClazzUp">
 import * as clazzUpApi from "@/api/school/clazzUpApi";
 import {getCurrentInstance, reactive, ref, toRefs, watch} from "vue";
 import * as publicApi from "@/api/school/publicApi";

 /** 表格相关变量*/
 const loading = ref(true);
 const yearClazzDataList = ref([]);
 const open = ref(false);
 const title = ref('');
 const gradeOptions = ref([]);
 const clazzOptions = ref([]);
 const { proxy } = getCurrentInstance();

 const data = reactive({
   form: {
     currentYear: undefined,
     currentGradeId: undefined,
     currentGradeName: undefined,
     currentClazzId: undefined,
     currentClazzName: undefined,
     upYear: undefined,
     upGradeId: undefined,
     upClazzId: undefined
   },
   rules: {
     currentYear: [{ required: true, message: '当前年度不能为空', trigger: 'blur'}],
     currentGradeId: [{ required: true, message: '当前年级不能为空', trigger: 'blur' }],
     currentClazzId: [{ required: true, message: '当前班级不能为空', trigger: 'blur' }],
     upYear: [{ required: true, message: '目标年度不能为空', trigger: 'blur' }],
     upGradeId: [{ required: true, message: '目标年级不能为空', trigger: 'blur' }],
     upClazzId: [{ required: true, message: '目标班级不能为空', trigger: 'blur' }],
   }
 })

 const { queryParams, form, rules } = toRefs(data)

 function getList() {
   loading.value = true;
   clazzUpApi
       .list()
       .then((response) => {
         yearClazzDataList.value = response;
         console.log(yearClazzDataList.value)
       })
       .finally(() => {
         loading.value = false;
       });
 }

 getList()

 function handleUpdate(row) {
   console.log(row)
   form.value.currentYear = row.year;
   form.value.currentGradeId = row.gradeId;
   form.value.currentGradeName = row.gradeName;
   form.value.currentClazzId = row.clazzId;
   form.value.currentClazzName = row.clazzName
   open.value = true
   title.value = "升班操作弹框界面"
 }

 function handleDelete(row) {
   console.log(row)
 }

 publicApi.allGradeList().then((response) => {
   gradeOptions.value = response
 })

 watch(
     () => data.form.upGradeId,
     (newValue, oldValue) => {
       console.log("newValue",newValue, "oldvalue", oldValue);
       if (newValue === undefined || newValue == null) {
         data.form.upClazzId = undefined
       } else {
         publicApi.allClazzList({gradeId : newValue}).then((response) => {
           clazzOptions.value = response
         })
       }
     }
 );

 function gradeChangeHandle(upGradeId) {
   console.log(upGradeId)
   data.form.upClazzId = undefined
 }

 /** 提交按钮 */
 function submitForm() {
   proxy.$refs.clazzUpRef.validate((valid) => {
     if (valid) {
       clazzUpApi.clazzUp(form.value).then((response) => {
         proxy.$modal.msgSuccess('升班成功');
         open.value = false;
         getList();
       });
     }
   });
 }

 /** 表单重置 */
 function reset() {
   form.value = {
     currentYear: undefined,
     currentGradeId: undefined,
     currentGradeName: undefined,
     currentClazzId: undefined,
     currentClazzName: undefined,
     upYear: undefined,
     upGradeId: undefined,
     upClazzId: undefined
   };
   proxy.resetForm('clazzUpRef');
 }

 /** 取消按钮 */
 function cancel() {
   open.value = false;
   reset();
 }

</script>

<style scoped>

</style>
